<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* Turf (http://turfjs.org/) 
* Leaflet.draw (https://github.com/Leaflet/Leaflet.draw/)
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_turfMeasurement"></title>
    <script type="text/javascript" include="bootstrap,bootstrap-select,widgets.alert"
            src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="turf,leaflet.draw" src="../../dist/leaflet/include-leaflet.js"></script>

<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",
        turfLayer, resultLayer, urlWorld,
        totalLat = 0, totalLng = 0, averageLat, averageLng, distance, geo, coordinate,
        choose, marker1, marker2, marker3, editableLayers, drawControl,
        bearing, baseLayer, result, val,
        radius, steps, point;

    var map = L.map('map', {
        crs: L.CRS.EPSG4326,
        center: {lon: 116.383572, lat: 39.914714},
        maxZoom: 18,
        zoom: 10
    });


    //底图
    baseLayer = new L.supermap.TiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);

    initEditView();

    bindEvents();

    $('#menuSelect').change();

    function initEditView() {
        var infoView = L.control({position: 'topright'});
        infoView.onAdd = function () {
            var me = this;
            me._div = L.DomUtil.create('div');
            me._div.style.width = '350px';
            me._div.innerHTML = "<div class='panel panel-primary editPane' id='editPane'>"+
                "<div class='panel-heading'>"+
            "<h5 class='panel-title text-center'>"+ resources.text_Jingshen + "</h5>"+
            "</div>"+
            "<div class='panel panel-body chooseItems' style='margin-bottom:0px;padding-bottom: 0px'>"+
            "<select class='form-control' id='menuSelect' >"+
            "<option value='along' selected='selected'>along</option>"+
            "<option value='area'>area</option>"+
            "<option value='bbox'>bbox</option>"+
            "<option value='center'>center</option>"+
            "<option value='destination'>destination</option>"+
            "<option value='distance'>distance</option>"+
            "<option value='midpoint'>midpoint</option>"+
            "<option value='square'>square</option>"+
            "<option value='greatCircle'>greatCircle</option>"+
            "<option value='bezierSpline'>bezierSpline</option>"+
            "<option value='buffer'>buffer</option>"+
            "<option value='circle'>circle</option>"+
            "</select>"+
            "</div>"+
            "<hr/>"+
            "<div class='panel-body' id='params' style='padding-top: 0px'>"+
            "<div class='input-group'>"+
            "<span class='input-group-addon'>" + resources.text_distanceUnit + "</span>"+
            "<select class='form-control' id='unitSelect' name='unitSelect'>"+
            "<option value='kilometers' selected = 'selected'>kilometers</option>"+
            "<option value='miles'>miles</option>"+
            "<option value='degrees'>degrees</option>"+
            "<option value='radians'>radians</option>"+
            "</select>"+
            "</div>"+
            "<p></p>"+
            "<div class='input-group'>"+
            "<span class='input-group-addon'>" + resources.text_distanceToStart + "</span>"+
            "<input id='distance' type='text' class='form-control' placeholder=" + resources.text_distance + " val='0.5'/>"+
            "</div>"+
            "<p></p>"+
            "<div class='input-group'>"+
            "<span class='input-group-addon'>" + resources.text_position + "</span>"+
            "<input id='bearing' type='text' class='form-control' placeholder=" + resources.text_positionRange + "/>"+
            "</div>"+
            "<p></p>"+
            "<div align='right' class='input-group'>"+
            "<input type='button' id='calc' class='btn btn-primary' value=" + resources.btn_getResult + "/>"+
            "</div>"+
            "</div>"+
            "</div>";
            handleMapEvent(me._div, me._map);
            return me._div;
        };
        infoView.addTo(map);
        hidePanel();
        reset();
    }

    //初始化事件
    function bindEvents() {
//        //获取单位
//        $('#unitSelect').change(function () {
//            unit = $('#unitSelect').children('option:selected').val();
//        });
        //控件栏取消地图事件
        $("#editPane").mouseover(function (e) {
            map.dragging.disable();
        });
        $("#editPane").mouseout(function () {
            map.dragging.enable();
        });

        $('#menuSelect').change(function () {
            widgets.alert.clearAlert();

            //初始化图层
            removeLayer();

            //初始化图层
            resetLayers();

            url = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
            baseLayer = new L.supermap.TiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);
            //第一个隐藏右侧菜单

            choose = $('#menuSelect').children('option:selected').val();
            reset();

            //对应菜单显示
            if (choose === 'along') {
                $('.panel-heading>h5').text(resources.text_Jingshen);
                drawLine();
                setCenter();
                setAlongIcon();
                clearControl();
                $('.input-group:eq(0)').show();
                $('.input-group:eq(1)').show();
                $('.input-group:eq(2)').hide();
                $('.input-group:eq(3)').show();
                $('.input-group:eq(1)>span').text(resources.text_distanceToStart);
                $('.input-group:eq(1)>input').val("0.5");

                $('.input-group:eq(1)>input').focusout(function () {
                    val = $('.input-group:eq(1)>input').val();
                    var unit = $('#unitSelect').children('option:selected').val();
                    if ((unit === 'kilometers' && val > 1.1753172567467551) || (unit === 'miles' && val > 0.7303085417726581) || (unit === 'degrees' && val > 0.010566564943528475) || (unit === 'radians' && val > 0.00018442134893248942)) {
                        widgets.alert.showAlert(resources.text_beyondDistance, false, 260);
                        $('.input-group:eq(1)>input').val('');
                    }
                    else {
                        widgets.alert.clearAlert();
                    }
                });

                $('#calc').val(resources.text_getPoint);
            }
            else if (choose === 'area') {
                widgets.alert.showAlert(resources.msg_drawTurfPolygon, true, 500);
                $('.panel-heading>h5').text(resources.text_measureArea);
                clearControl();
                setDefaultCenter(39.90455699411283, 116.407283, 11);
                drawController(false, false, true);
                drawing();
                $('.input-group:eq(0)').hide();
                $('.input-group:eq(1)').hide();
                $('.input-group:eq(2)').hide();
                $('.input-group:eq(3)').show();
                $('#calc').val(resources.text_getArea);
            }
            else if (choose === 'bbox') {
                $('.panel-heading>h5').text(resources.text_JingshenBounds);
                setDefaultCenter(39.70182899926848, 116.11948400050001, 11);
                drawLine();
                setCenter();
                clearControl();
                $('.input-group:eq(0)').hide();
                $('.input-group:eq(1)').hide();
                $('.input-group:eq(2)').hide();
                $('.input-group:eq(3)').show();
                $('#calc').val(resources.text_getBounds);
            }
            else if (choose === 'destination') {
                $('.panel-heading>h5').text(resources.text_pointToTarget);
                setDefaultCenter(39.90455699411283, 116.407283, 7);
                $('.input-group:eq(0)').show();
                $('.input-group:eq(1)').show();
                $('.input-group:eq(2)').show();
                $('.input-group:eq(3)').show();
                $('.input-group:eq(1)>span').text(resources.text_distanceToStart);
                $('.input-group:eq(1)>input').unbind('focusout').val("0.5");
                $('.input-group:eq(2)>span').text(resources.text_position);
                $('.input-group:eq(2)>input').attr('placeholder', resources.text_positionRange);
                setDestinationIcon();
                clearControl();
                $('#calc').val(resources.text_getTargetPoint);
            }
            else if (choose === 'distance') {
                $('.panel-heading>h5').text(resources.text_distanceBetween);
                setDefaultCenter(39.80771500024742, 116.72499999899998, 8);
                clearControl();
                setDistanceIcon();
                $('.input-group:eq(0)').show();
                $('.input-group:eq(1)').hide();
                $('.input-group:eq(2)').hide();
                $('.input-group:eq(3)').show();
                $('#calc').val(resources.text_getDistance);
            }
            else if (choose === 'midpoint') {
                $('.panel-heading>h5').text(resources.text_middlePointBetween);
                setDefaultCenter(39.90455699411283, 116.407283, 7);
                clearControl();
                setMidpointIcon();
                $('.input-group:eq(0)').hide();
                $('.input-group:eq(1)').hide();
                $('.input-group:eq(2)').hide();
                $('.input-group:eq(3)').show();
                $('#calc').val(resources.text_getMiddlePoint);
            }
            else if (choose === 'greatCircle') {
                $('.panel-heading>h5').text(resources.text_bigRoundRoute);
                isUseWorldMap(1);
                clearControl();
                setDefaultCenter(40, 112, 3);
                setGreatCircleIcon();
                $('.input-group:eq(0)').hide();
                $('.input-group:eq(1)').hide();
                $('.input-group:eq(2)').hide();
                $('.input-group:eq(3)').show();
                $('#calc').val(resources.text_getRoute);
            }
            else if (choose === 'square') {
                widgets.alert.showAlert(resources.msg_externalTangentSquare, true, 500);
                $('.panel-heading>h5').text(resources.text_externalTangentSquare);
                setDefaultCenter(39.70914100034369, 116.11697300062501, 14);
                clearControl();
                drawController(false, false, false, false, true);
                drawing();
                $('.input-group:eq(0)').hide();
                $('.input-group:eq(1)').hide();
                $('.input-group:eq(2)').hide();
                $('.input-group:eq(3)').show();
                $('#calc').val(resources.text_getExternalTangentSquare);
            }
            else if (choose === 'center') {
                $('.panel-heading>h5').text(resources.text_scenicSpotsCenter);
                setDefaultCenter(39.93393099410061, 116.38035099999959, 12);
                clearControl();
                setCenterIcon();
                $('.input-group:eq(0)').hide();
                $('.input-group:eq(1)').hide();
                $('.input-group:eq(2)').hide();
                $('.input-group:eq(3)').show();


                $('#calc').val(resources.text_getScenicSpotCenter);
            }
            else if (choose === 'bezierSpline') {
                $('.panel-heading>h5').text(resources.text_bezier);
                setDefaultCenter(40.676116230453765, 116.55439124389999, 12);
                clearControl();
                whiteRiver();
                $('.input-group:eq(0)').hide();
                $('.input-group:eq(1)').hide();
                $('.input-group:eq(2)').hide();
                $('.input-group:eq(3)').show();
                $('#calc').val(resources.text_getBezier);
            }
            else if (choose === 'buffer') {
                $('.panel-heading>h5').text(resources.text_buffer);
                widgets.alert.showAlert(resources.msg_markPoint, true);
                clearControl();
                setDefaultCenter(40, 116.83, 9);
                drawController(false, false, false, false, false, false, true);
                drawing();

                $('.input-group:eq(0)').show();//单位
                $('.input-group:eq(1)').show();//步长
                $('.input-group:eq(2)').show();//半径
                $('.input-group:eq(3)').show();
                $('.input-group:eq(1)>span').text(resources.text_step);//步长
                $('.input-group:eq(1)>input').unbind('focusout').val("1");
                $('.input-group:eq(2)>span').text(resources.text_radius);//半径
                $('.input-group:eq(2)>input').val("10");
                $('#calc').val(resources.text_getBuffer);
            }
            else if (choose === 'circle') {
                $('.panel-heading>h5').text(resources.text_polygon);
                widgets.alert.showAlert(resources.msg_markPoint, true);
                clearControl();
                setDefaultCenter(40, 116.83, 9);
                drawController(false, false, false, false, false, false, true);
                drawing();
                $('.title').show();
                $('.title>span').text('circle');
                $('.area').hide();
                $('.input-group:eq(0)').show();//单位
                $('.input-group:eq(1)').show();//步长
                $('.input-group:eq(2)').show();//半径
                $('.input-group:eq(3)').show();
                $('.input-group:eq(1)>span').text(resources.text_step);//步长
                $('.input-group:eq(1)>input').unbind('focusout').val("10");
                $('.input-group:eq(2)>span').text(resources.text_radius);//半径
                $('.input-group:eq(2)>input').val("10");
                $('#calc').val(resources.text_getPolygon);
            }
            else {
                widgets.alert.showAlert(resources.msg_noMethod, false);
            }
            showPanel();
        });


        //生成对应距离点点击事件
        $('#calc').click(function () {

            //获取自定义距离
            distance = $('#distance').val();
            //获取自定方位
            bearing = $('#bearing').val();
            //步长
            steps = distance;

            //半径
            radius = bearing;
            //角度

            angle = distance;

            meths = {
                "along": along,
                "area": area,
                "bbox": bbox,
                "destination": destination,
                "distance": turf_Distance,
                "midpoint": midpoint,
                "greatCircle": greatCircle,
                "square": square,
                "center": center,
                "bezierSpline": bezierSpline,
                "buffer": buffer,
                "circle": circle,
            };
            if (!meths[choose]) {
                widgets.alert.showAlert(resources.msg_illegal, false);
            }
            meths[choose]();
        });
    }


    //添加draw的控件
    function drawController(toolbar, polyline, polygon, circle, rectangle, circlemarker, marker) {
        editableLayers = new L.FeatureGroup();
        map.addLayer(editableLayers);
        var options = {
            position: 'topleft',
            draw: {
                toolbar: toolbar,
                polyline: polyline,
                polygon: polygon,
                circle: circle,
                rectangle: rectangle,
                circlemarker: circlemarker,
                marker: marker,
                remove: {},
            }
        };
        drawControl = new L.Control.Draw(options);
        map.addControl(drawControl);
        handleMapEvent(drawControl.getContainer(), map);
    }

    //开始画图
    function drawing() {
        map.on(L.Draw.Event.CREATED, function (e) {
            var type = e.layerType,
                layer = e.layer;
            geo = layer.toGeoJSON();
            coordinate = geo.geometry.coordinates;
            editableLayers.addLayer(layer);
        });
    }

    //京深路数据
    function drawLine() {
        roadLine = L.polyline([
            [39.70771500024742, 116.12499999899998],
            [39.70738300038022, 116.124684999625],
            [39.70738300038022, 116.124684999625],
            [39.70630000081341, 116.12366300000001],
            [39.70630000081341, 116.12366300000001],
            [39.70526299956156, 116.122695000875],
            [39.70182899926848, 116.11948400050001],
            [39.70182899926848, 116.11948400050001],
            [39.70001099999569, 116.117782000875],
            [39.70001099999569, 116.117782000875],
            [39.69914100034369, 116.11697300062501]
        ]).addTo(map);
        marker1 = L.marker([39.70771500024742, 116.12499999899998]), marker2 = L.marker([39.69914100034369, 116.11697300062501]);
        coordinate = roadLine.toGeoJSON().geometry.coordinates;
    }

    //白河
    function whiteRiver() {
        riverLine = L.polyline([
            [40.675731250349635, 116.44468018273878],
            [40.67514041485476, 116.45764286288912],
            [40.675374865714495, 116.47234517561137],
            [40.68284917168584, 116.4864209475681],
            [40.6926826346566, 116.50806547030137],
            [40.701383778180805, 116.51490194761084],
            [40.68381460602459, 116.54403108790551],
            [40.676116230453765, 116.55439124389999],
            [40.67476948501498, 116.56406552077725],
            [40.68296164868846, 116.58188801112561],
            [40.70683026321353, 116.5925083591713],
            [40.72097728359635, 116.59861159022633],
            [40.71945202953016, 116.61194828377546],
            [40.71459183686403, 116.6157779223366]
        ]).addTo(map);
        coordinate = riverLine.toGeoJSON().geometry.coordinates;
    }

    //设置中心点
    function setCenter() {
        //初始化
        totalLng = 0, totalLat = 0;
        for (var i = 0; i < coordinate.length; i++) {
            totalLat += coordinate[i][0];
        }
        averageLat = totalLat / coordinate.length;

        for (var j = 0; j < coordinate.length; j++) {
            totalLng += coordinate[j][1];
        }
        averageLng = totalLng / coordinate.length;
        map.setView(L.latLng(averageLng, averageLat), 15);
    }

    //设置自定义中心
    function setDefaultCenter(lng, lat, zoom) {
        var options = {
            "animate": true,
            "duration": 0.15,
            "easeLinearity": 0.25,
            "noMoveStart": false,
        };
        map.flyTo(L.latLng(lng, lat), zoom, options);
    }

    //判断底图
    function isUseWorldMap(bool) {
        if (bool) {
            urlWorld = host + "/iserver/services/map-world/rest/maps/World";
            url = urlWorld;
            baseLayer = new L.supermap.TiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);
        }
        else {
            url = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图";
            baseLayer = new L.supermap.TiledMapLayer(url, {prjCoordSys: {"epsgCode": 4326}}).addTo(map);
        }
    }

    //设置along方法的icon
    function setAlongIcon() {
        var startIcon = L.icon({
            iconUrl: '../img/start_trans.png',
            iconSize: [20, 20],
        });
        var endIcon = L.icon({
            iconUrl: '../img/end_trans.png',
            iconSize: [20, 20],
        });
        L.marker(marker1.getLatLng(), {icon: startIcon}).addTo(map);
        L.marker(marker2.getLatLng(), {icon: endIcon}).addTo(map);
    }

    //设置center方法的icon
    function setCenterIcon() {
        turfLayer.process("Helper.multiPoint", {
            //北京周边景区
            "coordinates": ([[116.38035099999959, 39.93393099410061], [116.34482800000002, 39.914760994108605], [116.40732099999964, 39.916013994108134], [116.44748600000042, 39.93767799409907]]),
        });
    }

    //设置distance方法的Icon
    function setDistanceIcon() {
        turfLayer.process("Helper.multiPoint", {
            //北京2天津
            "coordinates": ([[116.407283, 39.90455699411283], [117.215268, 39.12096299445415]]),
        });
    }


    //设置destination方法的Icon.
    function setDestinationIcon() {
        marker3 = L.marker([39.90455699411283, 116.407283]);
        var startIcon = L.icon({
            iconUrl: '../img/start_trans.png',
            iconSize: [20, 20],
        });
        L.marker(marker3.getLatLng(), {icon: startIcon}).addTo(map);
    }

    //设置midpoint方法的Icon
    function setMidpointIcon() {
        turfLayer.process("Helper.multiPoint", {
            //北京2天津
            "coordinates": ([[116.407283, 39.90455699411283], [117.215268, 39.12096299445415]]),
        });
    }

    //设置greatCircle方法的Icon
    function setGreatCircleIcon() {
        turfLayer.process("Helper.multiPoint", {
            //北京2布拉格
            "coordinates": ([[116.407283, 39.90455699411283], [51.052494, 18.852219]])
        });
    }

    //右侧panel显示
    function showPanel() {
        $('#params').show();
    }

    //右侧panel隐藏
    function hidePanel() {
        $('#params').hide();
    }

    //初始化页面
    function reset() {
        $('.chooseItems').show();
        hidePanel();
        $('.panel-heading>h5').text(resources.text_measure);
        $('#unitSelect option:first').prop("selected", 'selected');
        $('#distance').val('');
        $('#bearing').val('');
        coordinate = 0;
    }


    function clearControl() {
        if (drawControl) {
            map.removeControl(drawControl);
        }
    }

    //清空当前图层
    function removeLayer() {
        map.eachLayer(function (layer) {
            if (layer !== baseLayer) {
                layer.removeFrom(map);
            }
        });
    }

    //初始化生成图层
    function resetLayers() {
        turfLayer = new L.supermap.TurfLayer({
            attribution: " <span>© <a href='https://turfjs.org/' target='_blank'>turfjs</a></span>",
            style: function (feature) {
                return {
                    color: "rgb(0,153,255)",
                    opacity: 1,
                    fillColor: "rgb(0,153,255)",
                    fillOpacity: 0.1,
                    weight: 6
                };
            }
        }).addTo(map);


        resultLayer = new L.supermap.TurfLayer({
            attribution: "",
            style: function (feature) {

                return {
                    color: "rgb(255,0,0)",
                    opacity: 1,
                    fillColor: "rgb(255,0,0)",
                    fillOpacity: 0.1,
                    weight: 6
                };
            }
        }).addTo(map);
    }

    // 判断input是否是数字
    function checkIsNum(num) {
        var reg = /^\d+(\.\d+)?$/g;
        if (reg.test(num)) {
            return 1;
        } else {
            widgets.alert.showAlert(resources.msg_illegalFillIn, false, 260)
        }
    }

    //判断是否在[-180,180]范围内
    function isInRange(val) {
        // return val >= -180 && val <= 180;
        if (val < -180 || val > 180) {
            widgets.alert.showAlert(resources.msg_inputValue, false, 260);
        }
        else {
            return 1;
        }
    }


    function greatThanZero(steps) {
        var reg = /^[1-9]\d*(\.\d+)?$/g;
        if (!reg.test(steps)) {
            widgets.alert.showAlert(resources.msg_stepSize, false);
        }
    }


    //turf along方法
    function along() {
        var unit = $('#unitSelect').children('option:selected').val();
        if (unit != 'null' && unit != undefined) {
            if (checkIsNum(distance) && coordinate) {
                turfLayer.process("Helper.lineString", {
                    "coordinates": coordinate,
                }, function (line) {
                    resultLayer.process("Measurement.along", {
                        "line": line,
                        "distance": distance,
                        "units": unit,
                    });
                });
            }
        }
        else {
            widgets.alert.showAlert(resources.msg_selectUnit, false, 260);
        }
    }

    //turf area方法
    function area() {
        if (coordinate) {
            turfLayer.process("Helper.polygon", {
                "coordinates": coordinate,
            }, function (polygon) {
                resultLayer.process("Measurement.area", {
                    "geojson": polygon
                }, function (e) {
                    result = e + resources.msg_sqm;
                    widgets.alert.showAlert(result, true);
                    $(" input[ id='area' ] ").val(result);
                });
            });
        }
        else {
            widgets.alert.showAlert(resources.msg_drawLayer, false, 260);
        }
    }

    //turf bbox方法
    function bbox() {
        if (coordinate) {
            turfLayer.process("Helper.lineString", {
                "coordinates": coordinate,
            }, function (e) {
                resultLayer.process("Measurement.bbox", {
                    "geojson": e
                }, function (bbox) {
                    resultLayer.process("Measurement.bboxPolygon", {
                        "bbox": bbox
                    });
                });
            });
        }
    }

    //turf destination方法
    function destination() {
        var unit = $('#unitSelect').children('option:selected').val();
        if (unit != 'null' && unit != undefined) {
            widgets.alert.clearAlert();
            if (checkIsNum(distance) && isInRange(bearing)) {
                coordinates = [116.407283, 39.90455699411283];
                resultLayer.process("Measurement.destination", {
                    "origin": coordinates,
                    "distance": distance,
                    "bearing": bearing,
                    "units": unit,
                });

            }
        }
        else {
            widgets.alert.showAlert(resources.msg_selectUnit, false, 260)
        }
    }

    //turf distance方法
    function turf_Distance() {
        var disUnits = {
            "kilometers": "千米",
            "miles": "英里",
            "degrees": "角度",
            "radians": "弧度",
        };
        var inUnits = {
            "千米": "kilometers",
            "英里": "miles",
            "角度": "degrees",
            "弧度": "radians",
        };
        var unit = $('#unitSelect').children('option:selected').val();
        if (unit != 'null' && unit != undefined) {
            resultLayer.process("Measurement.distance", {
                "from": turfLayer.toGeoJSON().features[0].geometry.coordinates[0],
                "to": turfLayer.toGeoJSON().features[0].geometry.coordinates[1],
                "units": unit,
            }, function (e) {
                resultNum = e;
            });
            unit = disUnits[unit];
            result = resultNum + unit;
            widgets.alert.showAlert(result, true, 260);
            $(" input[ id='area' ] ").val(result);
            unit = inUnits[unit];
        }
        else {
            widgets.alert.showAlert(resources.msg_selectUnit, false, 260)
        }

    }

    //turf midpoint
    function midpoint() {

        resultLayer.process("Measurement.midpoint", {
            "point1": turfLayer.toGeoJSON().features[0].geometry.coordinates[0],
            "point2": turfLayer.toGeoJSON().features[0].geometry.coordinates[1],
        });
        resultLayer.eachLayer(function (layer) {
            layer.setIcon(L.icon({
                iconUrl: '../img/marker-gold.png',
                iconSize: [20, 20],
            })).bindPopup(resources.text_center);
        })

    }

    //turf greatCircle
    function greatCircle() {
        resultLayer.process("Measurement.greatCircle", {
            "start": turfLayer.toGeoJSON().features[0].geometry.coordinates[0],
            "end": turfLayer.toGeoJSON().features[0].geometry.coordinates[1],
            "properties": {'name': '北京 to 布拉格'},
            "npoints": 100,
            "offset": 10
        });
    }

    //turf square
    function square() {
        if (!coordinate) {
            return;
        }
        turfLayer.process("Helper.polygon", {
            "coordinates": coordinate,
        }, function (e) {
            turfLayer.process("Measurement.bbox", {
                "geojson": e
            }, function (box) {
                resultLayer.process("Measurement.square", {
                    "bbox": box
                }, function (bbox) {
                    resultLayer.process("Measurement.bboxPolygon", {
                        "bbox": bbox
                    });
                }, null, false);
            }, null, false);
        }, null, false);
    }

    //turf center
    function center() {
        resultLayer.process("Measurement.center", {
            "geojson": turfLayer.toGeoJSON()
        });
        resultLayer.eachLayer(function (layer) {
            layer.setIcon(L.icon({
                iconUrl: '../img/marker-gold.png',
                iconSize: [30, 30],
            })).bindPopup(resources.text_center);
        });
    }

    //turf bezierSpline
    function bezierSpline() {
        if (coordinate) {
            turfLayer.process("Helper.lineString", {
                "coordinates": coordinate,
            }, function (line) {
                resultLayer.process("Transformation.bezierSpline", {
                    "line": line,
                    "resolution": 10000,
                    "sharpness": 0.85
                });
            });
        }
    }

    //turf buffer
    //先draw一个点 再在此点上进行缓冲区分析,默认单位killo
    function buffer() {
        var unit = $('#unitSelect').children('option:selected').val();
        if (unit != 'null') {
            widgets.alert.clearAlert();
            greatThanZero(steps);
            if (coordinate && checkIsNum(distance) && checkIsNum(radius) && steps > 0) {
                turfLayer.process("Helper.point", {
                    "coordinates": coordinate,
                }, function (point) {
                    resultLayer.process("Transformation.buffer", {
                        "geojson": point,
                        "radius": radius,
                        "steps": parseFloat(steps),
                        "units": unit,
                    });
                });
            } else {
                widgets.alert.showAlert(resources.msg_incorrectInfo, false, 260);
            }
        }
        else {
            widgets.alert.showAlert(resources.msg_selectUnit, false, 260);
        }

    }

    //turf circle
    //先draw一个点 再在此点上画圆多边形
    //有默认单位kilometer
    function circle() {
        var unit = $('#unitSelect').children('option:selected').val();
        widgets.alert.clearAlert();
        greatThanZero(steps);
        if (coordinate && checkIsNum(distance) && checkIsNum(radius) && steps > 0) {
            turfLayer.process("Helper.point", {
                "coordinates": coordinate,
            }, function (point) {
                resultLayer.process("Transformation.circle", {
                    "center": point,
                    "radius": radius,
                    "steps": parseFloat(steps),
                    "units": unit,
                    "properties": {},
                });
            });
        }
        else {
            widgets.alert.showAlert(resources.msg_incorrectInfo, false, 260);
        }
    }

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
    }
</script>
</body>
</html>